<template>
  <div class="child">
    <h2>child</h2>
    <input
      type="text"
      v-model="son"
    />
  </div>
</template>
<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue'
const son = ref('子组件的数据')
const props = defineProps(['msg'])
const emit = defineEmits(['update:msg'])

watch(
  () => props.msg,
  (val) => {
    son.value = val
  }
)

watch(son, (val) => {
  emit('update:msg', val)
})
// export default {
//   props: ['msg'],
//   data() {
//     return {
//       son: '子组件'
//     }
//   },
//   watch: {
//     msg(val) {
//       this.son = val
//     },
//     son(val) {
//       this.$emit('update:msg', val)
//     }
//   }
// }
</script>
<style lang="scss" scoped></style>
